<!--eslint-disable-->
<template>
    <div id="app">
        <div id="tableView" class="tableView">
            <div id="tableTitle">
                <div id="title1">
                    <p class="titleLabel1">序号</p>
                </div>
                <div id="title2">
                    <p class="titleLabel1">区域</p>
                </div>
                <div id="title3">
                    <p class="titleLabel2">设备数</p>
                    <p class="titleLabel3">（台）</p>
                </div>
                <div id="title4">
                    <p class="titleLabel2">交易金额</p>
                    <p class="titleLabel3">（万元）</p>
                </div>
                <div id="title5">
                    <p class="titleLabel2">交易笔数</p>
                    <p class="titleLabel3">（笔）</p>
                </div>
            </div>
            <css-seamless-scroll
            v-if="tempArray.length>=1"
            class="seamless-warp"
            :data="list"
            :class-option="defaultOption">
            <ul class="ul-scoll">
                <li v-for="(item, index) in tempArray" :key='index'>
                  <div class="item" >
                    <div :class="(index % 2 == 1)?'value1-bg1':'value1-bg2'"><span>{{index+1}}</span> </div>
                    <div :class="(index % 2 == 1)?'value2-bg1':'value2-bg2'"><span>{{item.Isnormal}}</span></div>
                    <div :class="(index % 2 == 1)?'value3-bg1':'value3-bg2'"><span>{{item.C_Status}}</span></div>
                    <div :class="(index % 2 == 1)?'value4-bg1':'value4-bg2'"><span>{{item.C_IsLock}}</span></div>
                    <div :class="(index % 2 == 1)?'value5-bg1':'value5-bg2'"><span>{{item.C_Electricity}}</span></div>
                  </div>
                </li>
            </ul>
        </css-seamless-scroll>
            <!-- <vue-seamless-scroll v-if="tempArray.length>=1" :data="tempArray" class="seamless-warp" :class-option="defaultOption"  >
            <ul class="ul-scoll">
                <li v-for="(item, index) in tempArray" :key='index'>
                  <div class="item" >
                    <div :class="(index % 2 == 1)?'value1-bg1':'value1-bg2'"><span>{{index+1}}</span> </div>
                    <div :class="(index % 2 == 1)?'value2-bg1':'value2-bg2'"><span>{{item.Isnormal}}</span></div>
                    <div :class="(index % 2 == 1)?'value3-bg1':'value3-bg2'"><span>{{item.C_Status}}</span></div>
                    <div :class="(index % 2 == 1)?'value4-bg1':'value4-bg2'"><span>{{item.C_IsLock}}</span></div>
                    <div :class="(index % 2 == 1)?'value5-bg1':'value5-bg2'"><span>{{item.C_Electricity}}</span></div>
                  </div>
                </li>
            </ul>
        </vue-seamless-scroll> -->
        </div>

    </div>
</template>

<script>
/* eslint-disable */
import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll";
import {ref,reactive,toRefs,onMounted} from 'vue'
export default {
    name: "TableView",
    components: {
        cssSeamlessScroll
    },
    setup() {
        const state = reactive({
            list: [
            {
                    Isnormal: "断联",
                    C_Code: "123123",
                    C_Location: "北京",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,

                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                }
            ]
        })
;
return {
    ...toRefs(state),
};
    },
    // 监听属性 类似于data概念
    computed: {
            defaultOption () {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
 
        },
    data () {
        return {
            tempArray:[
                {
                    Isnormal: "断联",
                    C_Code: "123123",
                    C_Location: "北京",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,

                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                },
                {
                    Isnormal: "异常",
                    C_Code: "123123",
                    C_Location: "上海",
                    C_Status: 2,
                    C_IsLock: 3,
                    C_Electricity: 422222,
                }
            ], //定时器名称
            
            
        }
    },
    mounted: function () {
        console.log("mapmounted")
        this.init();
    },
    methods: {

        init() {
           

        },
    }
}

</script>


<style scoped lang="less">
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 0px;
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    .tableView {

        position: absolute;
        display: block;
        left: 10px;
        right: 10px;
        top:5%;
        bottom: 10px;
        background-color: rgba(0, 0, 0, 0.3);

        #tableTitle {
            position: absolute;
            display: block;
            left: 0;
            width: 100%;
            top:0;
            height: 60px;
            #title1{
                position: absolute;
                display: block;
                left: 0;
                width: 60px;
                top:0;
                height: 100%;
                background-color: rgba(36, 0 , 0,0.4);
            }
            #title2{
                position: absolute;
                display: block;
                right: calc(50% + 3px);
                width: calc(50% - 65px);
                top:0;
                height: 100%;
                background-color: rgba(36, 0 , 0,0.4);
            }
            #title3{
                position: absolute;
                display: block;
                right: calc(35% + 2px);
                width: 15%;
                top:0;
                height: 100%;
                background-color: rgba(36, 0 , 0,0.4);
            }
            #title4{
                position: absolute;
                display: block;
                right: calc(15% + 1px);
                width: 20%;
                top:0;
                height: 100%;
                background-color: rgba(36, 0 , 0,0.4);
            }
            #title5{
                position: absolute;
                display: block;
                right: 0px;
                width: 15%;
                top:0;
                height: 100%;
                background-color: rgba(36, 0 , 0,0.4);
            }
            .titleLabel1{
                position: absolute; 
                display: block; 
                color:#58DBE9; 
                width: 100%;
                font-family: '黑体'; 
                font-size: 16px;
                height: 16px;
                line-height: 16px;
                top: calc((100% - 16px) / 2);
            }
            .titleLabel2{
                position: absolute; 
                display: block; 
                color:#58DBE9; 
                width: 100%;
                font-family: '黑体'; 
                font-size: 16px;
                height: 16px;
                line-height: 16px;
                top: calc((50% - 16px) - 2px);
            }
            .titleLabel3{
                position: absolute; 
                display: block; 
                color:#58DBE9; 
                width: 100%;
                font-family: '黑体'; 
                font-size: 16px;
                height: 16px;
                line-height: 16px;
                bottom: calc((50% - 16px) - 2px);
            }
        }

        .seamless-warp{
            position: absolute;
            display: block;
            top: 60px;
            left: 0;
            width: 100%;
            height: calc(100% - 60px);
            overflow: hidden;
            color:rgba(255,255,255, 1);
            overflow-y: scroll;
           

        }
    

        .ul-scoll{

            li{
                display: block;
                margin-left: 0;
                margin-right: 0;
                margin-top: 0px;
                margin-bottom: 0px;
                height: 50px;

                .item {
                    display: block;
                    left: 0;
                    right: 0;
                    margin-top: 1px;
                    height: 100%;
                    // background-color: #58DBE9;
                    .value1-bg1 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: 0;
                        width: 60px;
                        height: 48px;
                        background-color: rgba(219, 95, 95, 0.13);
                    }
                    .value1-bg2 {
                        display: block;
                        position: absolute;
                        margin-top: 1px;
                        margin-left: 0;
                        width: 60px;
                        height: 48px;
                        background-color: rgba(95, 194, 219, 0.13);
                    }
                    .value2-bg1 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: 62px;
                        width: calc(50% - 67px);
                        height: 48px;
                        background-color: rgba(219, 95, 95, 0.13);
                    }
                    .value2-bg2 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: 62px;
                        width: calc(50% - 67px);
                        height: 48px;
                        background-color: rgba(95, 194, 219, 0.13);
                    }
                    .value3-bg1 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: calc(50% - 3px);
                        width: 15%;
                        height: 48px;
                        background-color: rgba(219, 95, 95, 0.13);
                    }
                    .value3-bg2 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: calc(50% - 3px);
                        width: 15%;
                        height: 48px;
                        background-color: rgba(95, 194, 219, 0.13);
                    }
                    .value4-bg1 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: calc(65% - 3px + 1px);
                        width: 20%;
                        height: 48px;
                        background-color: rgba(219, 95, 95, 0.13);
                    }
                    .value4-bg2 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        margin-left: calc(65% - 3px + 1px);
                        width: 20%;
                        height: 48px;
                        background-color: rgba(95, 194, 219, 0.13);
                    }
                    .value5-bg1 {
                        position: absolute;
                        display: block;
                        margin-top: 1px;
                        left: calc(85% - 1px);
                        width:  15%;
                        height: 48px;
                        background-color: rgba(219, 95, 95, 0.13);
                    }
                    .value5-bg2 {
                        position: absolute;
                        display: block;
                        left: calc(85% - 1px);
                        margin-top: 1px;
                        width:  15%;
                        height: 48px;
                        background-color: rgba(95, 194, 219, 0.13);
                    }

                    span{
                        position: absolute;
                        display: block;
                        left: 3px;
                        right: 3px;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 16px;
                        color: white;
                        line-height: 16px;
                        min-height: 16px;
                        top: calc((100% - 16px) / 2);
                    }
                }
                
            }
        }
    }

    .seamless-warp::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.seamless-warp::-webkit-scrollbar {
  width: 0; /* 隐藏水平滚动条 */
}

.seamless-warp::-webkit-scrollbar-track {
  width: 0; /* 隐藏轨道 */
}

.seamless-warp::-webkit-scrollbar-thumb {
  width: 0; /* 隐藏滚动条按钮 */
}
}



</style>